import { NavLink } from "react-router-dom"
import { naviGation, getGoodList, getBanner } from "../../tools/ajax";
import { useState, useEffect } from "react";
import { Carousel, } from 'antd';
import Display from "../../components/Display/display "
import './navigation.css'
export default () => {
    const contentStyle = {
        height: '160px',
        color: '#fff',
        lineHeight: '160px',
        textAlign: 'center',
        background: '#364d79',
        borderRadius: "20%"
    };
    const Arrow = ({ type, style, className, onClick }) => (
        <Icon type={type} style={style} className={className} onClick={onClick} />
    );
    const [types, setTypes] = useState([]);
    const [pages, page] = useState(1);
    const [count, setCounts] = useState([]);
    const [arr, setArrs] = useState([]);

    const getTypes = async () => {
        let { data: bannerData } = await getBanner();
        console.log(bannerData.data);
        arr.push(...bannerData.data);
        setArrs([...arr])
        //轮播图 
        let _arr = types;
        let { data: getTypeOne } = await naviGation()
        _arr.push(...getTypeOne.splice(0, 9))
        setTypes([..._arr]);
        //------列表 
        let { data: goodsData } = await getGoodList({ page: pages });
        setCounts([...goodsData])
    }

    useEffect(function () {
        getTypes()

    }, [])

    return (
        <div>
            <div className="type">
                <header>
                    {
                        types.map((item, i) => {
                            return (
                                <NavLink key={i} to="/">
                                    {item}
                                </NavLink>
                            )
                        })
                    }

                </header>


            </div>
            {/* 轮播图 */}
            <div className="types">
                <Carousel autoplay arrows={true} >

                    {
                        arr.map((item, i) => {
                            return (
                                <img key={i} src={item} alt="" />
                            )
                        })
                    }
                </Carousel>
            </div>
            {/* 轮播图 */}
            {/* 列表 */}
            <Display goodsList={count} />
            {/* 列表 */}

        </div >)
}